<template>
    <el-dialog
            :visible.sync="centerDialogVisible"
            @close='closeDialog'
            width="30%"
            center>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="登 录" name="login" lazy>
                <el-form ref="loginForm"
                         :model="loginForm"
                         label-width="0px"
                         :rules="formRules"
                         show-message
                         validate-on-rule-change>
                    <el-form-item prop="userCode">
                        <el-input type="text" placeholder="请输入用户名" v-model="loginForm.userCode">
                            <template slot="prepend"><i class="el-icon-user"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入密码" v-model="loginForm.password" show-password @keyup.enter.native="submit()">
                            <template slot="prepend"><i class="el-icon-lock"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item style="width:100%;">
                        <el-button type="primary"
                                   style="width:100%;"
                                   @click="submit()">
                            <span>登 录</span>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="注 册" name="signIn" lazy>
                <el-form ref="signInForm" :model="signInForm" label-width="0px" :rules="formRules">
                    <el-form-item prop="userCode">
                        <el-input placeholder="请输入用户名" v-model="signInForm.userCode">
                            <template slot="prepend"><i class="el-icon-user"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入密码" v-model="signInForm.password" show-password>
                            <template slot="prepend"><i class="el-icon-lock"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="collegeId">
                        <el-select v-model="signInForm.collegeId" filterable placeholder="请选择学校" @change="collegeChange">
                            <el-option
                                    v-for="item in collegeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:100%;">
                        <el-button type="primary"
                                   style="width:100%;"
                                   @click="submit()">
                            <span>注 册</span>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <!--<span slot="footer" class="dialog-footer">
            <el-button type="danger" size="medium" @click="submit">
                <span>{{btnName}}</span>
            </el-button>
        </span>-->
    </el-dialog>
</template>

<script>
    import {login, register} from "@/api/loginFun";
    import {selectAllCollege} from "@/api/collegeFun";
    import {Encrypt} from "@/utils/AesEncryptUtil";

    export default {
        name: "login",
        data() {
            return {
                centerDialogVisible: false,
                activeName: 'login',
                btnName: '登 录',

                loginForm: {
                    userCode: '',
                    password: ''
                },
                signInForm: {
                    userCode: '',
                    password: '',
                    collegeId: '',
                    collegeName: ''
                },
                collegeList: [],
                formRules: {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                    ],
                    userCode: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                    ],
                    collegeId: [
                        { required: true, message: '请选择学校', trigger: 'blur' }
                    ]
                },
                formLabelWidth: '120px'
            }
        },

        created(){
            // 监听
            this.$root.Bus.$on('loginDialog', value => {
                if (value) {
                    this.centerDialogVisible = value.centerDialogVisible;
                    this.activeName = value.activeName;
                }
            })

            this.getCollegeData();
        },

        methods: {
            getCollegeData(){
                selectAllCollege().then(res=>{
                    this.collegeList = res.data
                })
            },
            collegeChange(event, item){
                console.log(event, item)
            },
            closeDialog() {
                let form = {
                    userCode: '',
                    password: ''
                }
                this.loginForm = form;
                this.signInForm = form;
            },
            handleClick(tab, event) {
                this.activeName = tab.name;
                if (tab.name === 'login'){
                    this.btnName = '登 录';
                }else {
                    this.btnName = '注 册';
                }
            },
            submit(){
                let formName = 'loginForm';
                if (this.activeName === 'signIn') {
                    formName = 'signInForm'
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.activeName === 'login') {
                            let form = {
                                userCode: this.loginForm.userCode,
                                password: Encrypt(this.loginForm.password)
                            }
                            login(form).then(res => {
                                if (res.status == 200) {
                                    this.centerDialogVisible = false;
                                    this.$root.Bus.$emit('userInfo', res.data)
                                    window.location.reload();
                                } else {
                                    this.$message.error(res.message)
                                    return false
                                }
                            })
                        }else {
                            let form = {
                                userCode: this.signInForm.userCode,
                                password: Encrypt(this.signInForm.password),
                                collegeId: this.signInForm.collegeId
                            }
                            register(form).then(res => {
                                if (res.status == 200) {
                                    this.centerDialogVisible = false;
                                } else {
                                    this.$message.error(res.message)
                                    return false
                                }
                            })
                        }

                    } else {

                        return false;
                    }
                });
            }
        }
    }

</script>

<style scoped>

</style>
